<template>
  <div class="base-module">
    <div class="module-title">
      <span>基本信息</span>
      <i class=" jl_font">&#xe623;</i>
    </div>
    <image-file @close="showImageUpload=false" @uploadComfirm="uploadComfirm" :show="showImageUpload"></image-file>
    <div class="edit-box">
      <div class="header-img-box" @click="showImageUpload=true" :style="{backgroundImage:`url(${value.header_img})`}"></div>
      <div class="clearfix">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">姓名</label>
              <el-input v-model="value.user_name" placeholder="请输入内容"></el-input>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">性别</label>
              <div class="clearfix radio-box">
                <el-radio class="radio" v-model="value.sex" label="1">男</el-radio>
                <el-radio class="radio" v-model="value.sex" label="2">女</el-radio>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">名族</label>
              <el-input v-model="value.nationality" placeholder="请输入内容"></el-input>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">生日</label>
              <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择日期" v-model="value.birth_time" style="width: 100%;"></el-date-picker>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">居住地</label>
              <el-input v-model="value.location_name" placeholder="请输入内容"></el-input>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">邮箱</label>
              <el-input v-model="value.email" placeholder="请输入内容"></el-input>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">qq号码</label>
              <el-input v-model="value.QQ" placeholder="请输入内容"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter='10'>
          <el-col :span="24">
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { saveHeaderImage, saveResumeBase } from 'api'
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      showImageUpload: false,
      type: 'base'
    }
  },
  mounted() {
    console.log('进入base');
  },
  methods: {
    submitForm() {
      this.$promise.post(saveResumeBase, this.value).then(resp => {
        if (resp.status == 1) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }
      })
    },
    updateData({ type, key, val }) {
      this.$emit('changeData', { type, key, val })
    },
    
    uploadComfirm(str) {
      this.showImageUpload = false;
      if (str == '') {
        return false;
      }
      this.$promise.post(saveHeaderImage, {
        data: str
      }).then(resp => {
        this.updateData({
          type: this.type,
          key: 'header_img',
          val: resp.data.imageUrl
        })
        // this.url = 
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.base-module {
  background: #fff;
  color: #000;
  .header-img-box {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, .5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px;
  }
}
</style>

